<template>
    <!-- 系统设置 -->
    <section class="w-full h-full flex">
        <div class="base-list h-full">
            <div class="p-3 flex items-center justify-between base-head">
                <span class="font-bold text-base title">设置</span>
            </div>
            <el-scrollbar>
                <ul class="w-full title-list sys-install">
                    <li :class="{ active: selectedKeys === 1 }" @click="selectKey(1)">系统</li>
                    <li :class="{ active: selectedKeys === 2 }" @click="selectKey(2)">大模型</li>
                    <li :class="{ active: selectedKeys === 3 }" @click="selectKey(3)">知识库</li>
                    <li :class="{ active: selectedKeys === 4 }" @click="selectKey(4)">客服</li>
                    <div></div>
                </ul>
            </el-scrollbar>
        </div>
        <div class="sys-info">
            <!-- <el-scrollbar class="info-scroll">
                <router-view />
            </el-scrollbar> -->
            <el-scrollbar class="info-scroll">
                <SysCard v-if="selectedKeys==1"/>
                <LargeModelSetup v-if="selectedKeys==2"/>
                <KnowLedgeCard v-if="selectedKeys==3"/>
                <CustServe v-if="selectedKeys==4"/>
            </el-scrollbar>

        </div>
    </section>
</template>

<script lang="ts" setup>
    import { ref, onMounted, watch } from "vue";
    import { useRouter, useRoute  } from "vue-router";
    import SysCard from "../components/SysSetup/SysCard.vue";
    import LargeModelSetup from "../components/SysSetup/LargeModelSetup.vue";
    import KnowLedgeCard from "../components/SysSetup/KnowLedgeCard.vue";
    import CustServe from "../components/SysSetup/CustServe.vue";
    const selectedKeys = ref(1);
    const router = useRouter()
    const selectKey = (key: number) => {
        selectedKeys.value = key;
    };
    onMounted(() => {
        selectedKeys.value = 1;
    });
    //清除页面缓存
    watch(
        () => router.currentRoute.value,
        (newValue: any) => {
            selectedKeys.value = 1;
        },
        { immediate: true }
    );

</script>

<style scoped>
.base-list {
    width: 18rem;
    display: flex;
    flex-direction: column;
    /* background-color: #fff; */
}
.base-list /deep/ .el-scrollbar__view {
    height: 100%;
}
.title{
    color: var(--el-text-color-regular);
}
.base-head {
    border-right: 1px solid var(--v-nav-border-color);
}
.sys-install >li{
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
li {
    cursor: pointer;
    padding: .7rem;
    font-size: 1.2rem;
    overflow: hidden;
}
.sys-info {
    flex: 1;
    display: flex;
    margin: 30px 0;
    justify-content: center;
    background-color: var( --v-bg-color);
}
.info-scroll {
    width: 100%;
}
.sys-info ::v-deep(.el-scrollbar__wrap){
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sys-info ::v-deep(.el-scrollbar__view){
    width: 40%;
}
</style>